<template>
  <div style="padding-bottom: 0px; text-align: right">
    <div class="Addresssearch">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="text-align: left"
      >
        <el-form-item label="地址">
          <el-input
            v-model="formInline.Addresssearch"
            placeholder="地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <div class="" style="width: 30px"></div>
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="longitude1" placeholder="经度"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="latitude1" placeholder="纬度"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="map" id="map-container">
      <div id="panel" v-show="dcc"></div>
    </div>
    <el-button type="primary" @click="confirmPos()" class="fixBtn"
      >确定</el-button
    >
  </div>
</template>

<script>
//引入高德地图
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
  securityJsCode: "8bc667f47a733d5c4031248368c46caf", //你的安全密钥
};
let mymap = null;
export default {
  name: "",
  props: ["longitude", "latitude"],
  data() {
    return {
      dcc: false,
      location: "", // input的内容
      map: null, //
      lnglat: [], // 经纬度数组 [lng,lat]
      auto: null,
      placeSearch: null,
      markers: [],
      driving: null,
      longitude1: "",
      latitude1: "",
      formInline: {
        Addresssearch: "",
      },
    };
  },
  created() {},
  mounted() {
    AMapLoader.reset();
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  beforeDestroy() {
    if (!mymap) {
      return;
    }
    this.latitude1 = "";
    this.longitude1 = "";
    mymap.destroy();
    mymap = null;
  },

  methods: {
    initMap() {
      this.latitude1 = "";
      this.longitude1 = "";
      AMapLoader.load({
        key: "b4dc067f2a3f52770d4c47d96a0499a9", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.Driving",
          "AMap.DragRoute",
        ],
      })
        .then((AMap) => {
          mymap = new AMap.Map("map-container", {
            // 设置地图容器id
            viewMode: "2D", //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [122.469019, 30.720894], //中心点坐标
            resizeEnable: true,
          });
          // 监听鼠标点击事件
          mymap.on("click", this.clickMapHandler);
          // 函数调用（写入你先所需要的事件函数）
          // this.searchMap(); // POI关键字搜索
        })
        .catch((e) => {
          console.log(e);
        });
        console.log(this.latitude1)
    },
    //确定事件
    confirmPos() {
      this.$emit("getPos", {
        lon: this.longitude1,
        lat: this.latitude1,
      });
      this.longitude1 = "";
      this.latitude1 = "";
      this.formInline.Addresssearch = "";
    },
    // 点击地图事件获取经纬度，并添加标记
    clickMapHandler(e) {
      //  this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];

      this.longitude1 = e.lnglat.getLng();
      this.latitude1 = e.lnglat.getLat();
    },

    // 地图关键字查询
    onSubmit() {
      //  this.dcc = true;
      // 清除地图上所有添加的覆盖物
      mymap.clearMap();
      // 地址搜索
      if (!this.formInline.Addresssearch) return;

      let that = this;
      let placeSearch = new AMap.PlaceSearch({
        city: "嵊泗县", // 兴趣点城市，支持城市名、citycode、adcode
        citylimit: true, // 是否强制在设置的城市内搜索，默认false
        // type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
        pageSize: 50, // 每页条数，默认10，范围1-50
        pageIndex: 1, // 页码
        // extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息
        map: mymap, // 地图实例，可选
        //   panel: 'panel', // 结果列表的id容器，可选
        autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围
      });
      placeSearch.search(
        that.formInline.Addresssearch,
        function (status, result) {
          mymap.clearMap(); // 清除地图上所有添加的覆盖物
          //  console.log(status, result)
          // 监听鼠标点击事件
          // mymap.on("click", this.clickMapHandlerjwd);
          console.log(result.poiList.pois);
          var pois = result.poiList.pois;

          // 循环遍历所有点标记数组中的元素
          for (var i = 0; i < pois.length; i++) {
            // 创建点标记
            var marker = new AMap.Marker({
              position: [pois[i].location.lng, pois[i].location.lat], // 设置点标记位置
              title: pois[i].address + pois[i].name, // 设置点标记标题
              map: mymap, // 将点标记添加到地图上
            });

            // 给每个点标记添加一个点击事件
            //  let that=this;
            marker.on("click", (e) => {
              // 获取当前点标记的信息
              console.log("111111111111111111", e.target._originOpts.title);
              console.log(e.lnglat.lat, e.lnglat.lng);
              that.longitude1 = e.lnglat.lng;
              that.latitude1 = e.lnglat.lat;
              that.$message({
                showClose: true,
                message: e.target._originOpts.title,
                type: "success",
              });
            });
          }

          //  for(var i = 0; i < pois.length; i++){
          //      var poi = pois[i];
          //      var marker = [];
          //      marker[i] = new AMap.Marker({
          //          position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          //          title: poi.name
          //      });
          //      // 将创建的点标记添加到已有的地图实例：
          //     mymap.add(marker[i]);
          //
          //  }
          // // marker.on('click', this.markerClick);
          // mymap.setFitView();
        }
      );
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-input {
  width: 130px !important;
}
#panel {
  position: absolute;
  background-color: white;
  max-height: 500px;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  bottom: 0px;
  width: 280px;
  z-index: 99999;
}

.set .map {
  height: 600px;
}

#map-container {
  width: 100%;
  height: 500px;
  padding-bottom: 60px;
  position: relative;
}

.Addresssearch {
  height: 50px;
  width: 100%;
  background: #fff;
  /* padding: 5px 0 0 10px; */
  margin-top: -10px;
  margin-bottom: 10px;
}

.fixBtn {
  margin-top: 20px;
  /* bottom: 10px;
    right: 0%;
    height: 35px;
    width: 120px;
    z-index: 99; */
}
</style>
